<template>
  <view class="candidate-container">
    <!-- 加载动画 -->
    <view class="loading-mask" v-if="isLoading">
      <view class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载候选人中...</text>
      </view>
    </view>

    <!-- 候选人内容 -->
    <view v-if="!isLoading">
      <view class="header">
        <text class="count">共{{filteredRoleList.length}}人，已选{{selectedCount}}人</text>
        <view class="select-all-btn" @click="toggleSelectAll">{{isAllSelected ? '取消全选' : '全选'}}</view>
      </view>
      
      <view class="candidate-list">
        <!-- 候选人卡片 -->
        <view class="candidate-card" v-for="(candidate, index) in filteredRoleList" :key="index" :class="{ 'expanded': expandedIndex === index }">
          <view class="card-content">
            <!-- 头像 -->
            <image class="avatar" :src="getSafeAvatarUrl(candidate)" mode="aspectFill"></image>
            <view class="info">
              <view class="name-gender">
                <!-- 姓名 -->
                <text class="name">{{candidate && candidate['686e0c6fd9147824a38a6294'] || '姓名'}}</text>
                <text class="gender female">{{ candidate && candidate['686e0c6fd9147824a38a6295'] && candidate['686e0c6fd9147824a38a6295'][0] === '0c0fb821-0b64-4f7f-beb3-2f456c973ff9' ? '♂' : '♀' }}</text>
              </view>
              <view class="location">
                <!-- 角色 -->
                <text class="job">{{pageParams.roleType || '礼仪'}}</text>
                <text class="separator">|</text>
                <!-- 接单地址 -->
                <text class="city">{{candidate && candidate['68b121a8823eff0bd6132ac2'] || '---'}} · {{ candidate && candidate['686e0f429104eb90ad4247a4'] === '470a70a3-4fc3-4c4c-bea6-3bd2a2b7556c' ? '全国' : '仅本地' }}</text>
              </view>
            </view>
          </view>
          
          <!-- 展开后显示的内容 -->
          <view class="expanded-content" v-if="expandedIndex === index">
            <!-- tab -->
            <view class="tab-container">
              <view class="tab-bar">
                <view class="tab-item" :class="{ active: activeTab === 'details' }" @click="changeTab('details')">详情</view>
                <view class="tab-item" :class="{ active: activeTab === 'model' }" @click="changeTab('model')">模卡</view>
              </view>
            </view>
            
          <view v-if="activeTab === 'details'">
                        <!-- 形象信息 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>形象信息</text>
              </view>
              <view class="physical-info">
                <view class="info-item">
                  <text class="info-value">{{Number(candidate['686e0f429104eb90ad4247a5']) || '---'}}cm</text>
                  <text class="info-label">身高</text>
                </view>
                <view class="info-item">
                  <text class="info-value">{{Number(candidate['686e0f429104eb90ad4247a6']) || '---'}}kg</text>
                  <text class="info-label">体重</text>
                </view>
                <view class="info-item">
                  <text class="info-value">{{candidate['688051358c409b88b8519759'] || '---'}}</text>
                  <text class="info-label">三围</text>
                </view>
                <view class="info-item">
                  <text class="info-value">{{candidate['686e0f429104eb90ad4247a8'] || '---'}}</text>
                  <text class="info-label">鞋码</text>
                </view>
              </view>
            </view>
            
            <!-- 身份标签 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>身份标签</text>
              </view>
              <view class="tags">
                <view class="tag" v-for="tag in getSafeTags(candidate)" :key="tag">{{ tag }}</view>
                <view class="no-tags" v-if="!candidate['68b5676f153a1d736d85931d'] || candidate['68b5676f153a1d736d85931d'].length === 0">
                  <text>暂无标签</text>
                </view>
              </view>
            </view>
            
            <!-- 形象照片 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>形象照片</text>
              </view>
              
              <!-- 解析照片数据 -->
              <view class="photos" :class="getLayoutClass(candidate)">
                <!-- 视频 -->
                <view class="video-container" v-if="hasVideo(candidate)">
                  <video 
                    :src="getVideoUrl(candidate)" 
                    controls
                    object-fit="cover"
                    @error="videoError"
                  ></video>
                </view>
                
                <!-- 照片 -->
                <view class="photo-container" :class="{'with-video': hasVideo(candidate)}">
                  <template v-if="getPhotos(candidate).length > 0">
                    <image 
                      v-for="(photo, photoIndex) in getPhotos(candidate)" 
                      :key="photoIndex"
                      :src="photo" 
                      mode="aspectFill"
                      class="photo-item"
                      @error="photoError"
                      @click="previewImage(candidate, photoIndex)"
                    ></image>
                  </template>
                  <view class="no-photo" v-else>
                    <text>暂无照片</text>
                  </view>
                </view>
              </view>
              
              <view class="collapse-btn">
                <text>收起</text>
              </view>
            </view>
          </view>

          <view v-else>
            <!-- 模卡 -->
             <view v-if="candidate && candidate['688050b38c409b88b851973c']">
              <image 
                :src="JSON.parse(candidate['688050b38c409b88b851973c'])[0]" 
                mode="aspectFill"  
                class="photo-item"
                @click="previewMokaImage(candidate)"
              ></image>
             </view>

             
          </view>
        
        </view>
          
          <view class="expand-btn" :class="{ 'collapsed': expandedIndex === index }" @click="toggleExpand(index)">
            <image class="icon-down" :src="expandedIndex === index ? '/static/candidate-icons/up.png' : '/static/candidate-icons/down.png'" mode="aspectFit"></image>
            <text>{{expandedIndex === index ? '收起' : '展开'}}</text>
          </view>
          <view class="checkbox" :class="{ checked: candidate && candidate['68761720096a775fc5332e94'] == '已选中' }" @click="toggleSelect(index)">
            <text v-if="candidate && candidate['68761720096a775fc5332e94'] == '已选中'" class="icon-check">✓</text>
          </view>
        </view>

        
      </view>
      


         </view>

      
      <!-- 筛选条件栏 -->
      <view class="filter-bar" v-if="showFilterBar">
        <text class="filter-bar-text">筛选条件: 普通话 | 身高{{heightRange.min}}-{{heightRange.max}}cm 体重{{weightRange.min}}-{{weightRange.max}}kg</text>
      </view>
      
      <view class="footer">
        <view class="filter-btn" @click="showFilterModal = true">
          <text>条件筛选</text>
        </view>
        <view class="recommend-btn" @click="goToQuotation">
          <text>报价并推荐</text>
        </view>
      </view>
    
    
    <!-- 使用 page-container 替换筛选弹框 -->
    <page-container 
      :show="showFilterModal" 
      :position="'bottom'"
      :round="true"
      :close-on-slide-down="true"
      :overlay="true"
      :z-index="1000"
      :duration="300"
      @clickoverlay="closeFilterModal"
      @afterleave="onFilterModalClose"
    >
      <view class="filter-content">
        <!-- 弹框头部 - 标签筛选区 -->
        <view class="filter-header">
          <view class="tag-filter-header">
            <text class="tag-filter-title">标签筛选</text>
            <view class="tag-dropdown-container" @click="showTagDropdown = !showTagDropdown">
              <view class="tag-dropdown-btn">
                <text class="tag-dropdown-text">{{ updateTagFilterUI() }}</text>
              </view>
              <image class="tag-dropdown-arrow" :class="{ 'open': showTagDropdown }" src="/static/candidate-icons/right.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        
        <!-- 标签选择区域 -->
        <view class="tag-selection-area" v-if="showTagDropdown">
          <view class="tag-list">
            <view 
              class="tag-item" 
              :class="{ 'selected': selectedTags.includes(tag) }"
              v-for="tag in availableTags" 
              :key="tag"
              @click="toggleTag(tag)"
            >
              <text>{{ tag }}</text>
            </view>
          </view>
          <view class="tag-actions">
            <view class="clear-tags-btn" @click="clearTagFilter">清空</view>
          </view>
        </view>
        
        <!-- 筛选内容 -->
        <view class="filter-body">
          <!-- 条件筛选标题 -->
          <view class="condition-title-section">
            <text class="filter-title">条件筛选</text>
          </view>
          
          <!-- 分隔线 -->
          <view class="filter-divider"></view>
          
          <!-- 身高筛选 -->
          <view class="range-filter-section">
            <view class="range-filter-header">
              <text class="range-filter-title">身高</text>
              <text class="range-filter-value">{{heightRange.min}} - {{heightRange.max}} CM</text>
              <view></view>
            </view>
            <view class="range-slider-container">
              <view class="range-track">
                <view class="range-fill" :style="heightRangeStyle"></view>
                <view class="range-thumb range-thumb-min" :style="heightMinThumbStyle" 
                      @touchstart="startDragHeight('min', $event)"
                      @touchmove="dragHeight('min', $event)"
                      @touchend="endDrag"></view>
                <view class="range-thumb range-thumb-max" :style="heightMaxThumbStyle"
                      @touchstart="startDragHeight('max', $event)"
                      @touchmove="dragHeight('max', $event)"
                      @touchend="endDrag"></view>
              </view>
              <view class="range-labels">
                <text class="range-label">100</text>
                <text class="range-label">300CM</text>
              </view>
            </view>
          </view>
          
          <!-- 体重筛选 -->
          <view class="range-filter-section">
            <view class="range-filter-header">
              <text class="range-filter-title">体重</text>
              <text class="range-filter-value">{{weightRange.min}} - {{weightRange.max}} KG</text>
              <view></view>
            </view>
            <view class="range-slider-container">
              <view class="range-track">
                <view class="range-fill" :style="weightRangeStyle"></view>
                <view class="range-thumb range-thumb-min" :style="weightMinThumbStyle"
                      @touchstart="startDragWeight('min', $event)"
                      @touchmove="dragWeight('min', $event)"
                      @touchend="endDrag"></view>
                <view class="range-thumb range-thumb-max" :style="weightMaxThumbStyle"
                      @touchstart="startDragWeight('max', $event)"
                      @touchmove="dragWeight('max', $event)"
                      @touchend="endDrag"></view>
              </view>
              <view class="range-labels">
                <text class="range-label">30</text>
                <text class="range-label">100KG</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="filter-footer">
          <view class="filter-reset-btn" @click="resetFilter">重置</view>
          <view class="filter-apply-btn" @click="applyFilter">应用筛选</view>
        </view>
      </view>
    </page-container>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { apiService, ApiService } from '/pages/utils/api.js'
import { useProjectStore } from '/stores/project.js'
import { objectToUrlParams } from '/pages/utils/url.js'
import { useUserStore } from '/pages/store/user.js'


const userStore = useUserStore()

const currentPage = ref(1)
const total = ref(0)
const expandedIndex = ref(-1); // 当前展开的卡片索引，-1表示没有展开的卡片
const activeTab = ref('details'); // 当前激活的tab

const titleSet = new Set();

const candidates = ref();
const allCandidates = ref(); // 存储所有候选人数据，用于筛选

// 筛选弹框相关状态
const showFilterModal = ref(false);
const showTagDropdown = ref(false);
const showFilterBar = ref(false); // 控制筛选条件栏显示
const applyConditionFilter = ref(false); // 是否应用身高/体重条件筛选

// 加载状态
const isLoading = ref(true);

// 滑块范围数据
const heightRange = ref({
  min: 160,
  max: 180
});

const weightRange = ref({
  min: 45,
  max: 60
});

// 拖拽状态
const dragging = ref({
  height: null, // 'min' or 'max'
  weight: null,
  startX: 0,
  startValue: 0
});

// 存储传递过来的参数
const pageParams = ref({})

// 使用项目store
const projectStore = useProjectStore()

const  roleMap = ref(new Map())

// 标签筛选相关状态
const selectedTags = ref([]); // 选中的标签
const availableTags = computed(() => Array.from(titleSet)); // 可用的标签列表

// 更新标签筛选UI
const updateTagFilterUI = () => {
  if (selectedTags.value.length === 0) {
    return '请选择标签';
  } else if (selectedTags.value.length === 1) {
    return selectedTags.value[0];
  } else {
    return `已选${selectedTags.value.length}个标签`;
  }
};

// 根据当前标签过滤角色列表
const filteredRoleList = computed(() => {
  if (!allCandidates.value) return [];
  
  // 根据标签过滤角色
  return allCandidates.value.filter(role => {
    try {
      // 获取角色的标签数组
      const roleTags = role['68b56ffc153a1d736d8593a2'];
      if (!roleTags) return false;
      
      const tags = JSON.parse(roleTags);
      if (!Array.isArray(tags)) return false;
      
      // 解析并兼容中英文角色类型
      const roleTypeRaw = pageParams.value.roleType;
      const roleTypeMap = {
        etiquette: '礼仪',
        parttime: '兼职',
        leader: '带队'
      };
      const normalizedRoleType = roleTypeMap[roleTypeRaw] || roleTypeRaw; // 若传中文则原样使用
      
      // 未传角色类型则不过滤
      const roleTypeMatch = !normalizedRoleType || tags.includes(normalizedRoleType);

      if (!roleTypeMatch) return false;

      // 根据角色状态过滤 - 排除已选中和推荐失败的角色
      const roleRowid = role.rowid;
      const excludedStatuses = ['已选中', '推荐失败'];
      
      for (const status of excludedStatuses) {
        if (roleMap.value.has(status)) {
          const excludedRowids = roleMap.value.get(status);
          if (excludedRowids.includes(roleRowid)) {
            return false; // 排除这个角色
          }
        }
      }

      // 应用标签筛选
      if (selectedTags.value.length > 0) {
        const identityTags = role['68b5676f153a1d736d85931d'];
        if (!identityTags) return false;
        
        try {
          const identityTagsArray = JSON.parse(identityTags);
          if (!Array.isArray(identityTagsArray)) return false;
          
          // 检查是否有选中的标签匹配
          const hasMatchingTag = selectedTags.value.some(selectedTag => 
            identityTagsArray.includes(selectedTag)
          );
          if (!hasMatchingTag) return false;
        } catch (e) {
          console.error('解析身份标签失败:', e);
          return false;
        }
      }

      // 应用身高/体重条件筛选（可选）
      if (applyConditionFilter.value) {
        const height = parseInt(role['686e0f429104eb90ad4247a5']);
        const weight = parseInt(role['686e0f429104eb90ad4247a6']);
        const heightInRange = !isNaN(height) && height >= heightRange.value.min && height <= heightRange.value.max;
        const weightInRange = !isNaN(weight) && weight >= weightRange.value.min && weight <= weightRange.value.max;
        return heightInRange && weightInRange;
      }

      return true;
    } catch (e) {
      console.error('解析角色标签失败:', e);
      return false;
    }
  });
});


const getCeshi = async () => {
  try {
    isLoading.value = true; // 开始加载
    
    const res = await apiService.getCeshi({
      userRowid: userStore.rowid
    })
    console.log('getCeshi:');
    console.log(JSON.parse(res.data));
    // 打印身份标签  示例：["带队","兼职"]
    console.log(JSON.parse(JSON.parse(res.data)[0]['68b56ffc153a1d736d8593a2']));
    
    allCandidates.value = JSON.parse(res.data)
    
    // 清空之前的标签集合
    titleSet.clear();
    
    // 先过滤角色，再添加标签到titleSet
    const filteredCandidates = allCandidates.value.filter(role => {
      try {
        // 获取角色的标签数组
        const roleTags = role['68b56ffc153a1d736d8593a2'];
        if (!roleTags) return false;
        
        const tags = JSON.parse(roleTags);
        if (!Array.isArray(tags)) return false;
        
        // 解析并兼容中英文角色类型
        const roleTypeRaw = pageParams.value.roleType;
        const roleTypeMap = {
          etiquette: '礼仪',
          parttime: '兼职',
          leader: '带队'
        };
        const normalizedRoleType = roleTypeMap[roleTypeRaw] || roleTypeRaw; // 若传中文则原样使用
        
        // 未传角色类型则不过滤
        const roleTypeMatch = !normalizedRoleType || tags.includes(normalizedRoleType);
        return roleTypeMatch;
      } catch (e) {
        console.error('解析角色标签失败:', e);
        return false;
      }
    });
    
    // 从过滤后的候选人中提取标签
    filteredCandidates.forEach(candidate => {
      console.log('进入循环中:', candidate);
      // 安全地获取身份标签
      if (candidate['68b5676f153a1d736d85931d']) {
        try {
          const tags = JSON.parse(candidate['68b5676f153a1d736d85931d']);
          if (Array.isArray(tags)) {
            tags.forEach(tag => {
              titleSet.add(tag);
            });
          }
        } catch (e) {
          console.error('解析身份标签失败:', e);
        }
      }
    });

    console.log('titleSet:', titleSet);
    
    checkAllSelected()
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    isLoading.value = false; // 加载完成
  }
}

const getRoleStatus = async () => {
  const res = await apiService.getRowsData({
    worksheetId: "6876257b872d9db2c7ba529a",
    filters: [
          {
          "controlId": "rowid",
          "dataType": 2,
          "spliceType": 1,
          "filterType": 2,
          "value": pageParams.value .projectId,
        }
        ]
  })
  const roleStatusList = await apiService.getRowsData({
    worksheetId: "68aee8753f18dc08c56c82c5",
    filters: [
          {
          "controlId": "68aee8753f18dc08c56c82c9",
          "dataType": 2,
          "spliceType": 1,
          "filterType": 2,
          "value":  res.rows[0]['686df5d4fa20ded33c042478']
        },
        {
          "controlId": "68b84c036617217ad4227f51",
          "dataType": 2,
          "spliceType": 1,
          "filterType": 2,
          "value":  pageParams.value .roleType,
        },
        ]
  })

  console.log('roleStatusList:', roleStatusList.rows);
  

  // 将角色状态列表转换为map  
  roleStatusList.rows.forEach(item => {
    const key = item['68b7eb8d6617217ad42266b1'];
    const rowid = JSON.parse(JSON.parse(item['68aee8753f18dc08c56c82c4'])[0].sourcevalue).rowid;
    
    if(!roleMap.value.has(key)){
      roleMap.value.set(key, [rowid]);
    } else {
      const existingArray = roleMap.value.get(key);
      existingArray.push(rowid);
      // 不需要重新set，因为数组已经被修改了
    }
  });
  console.log('roleMap:', roleMap.value);
  

}


// 页面加载时调用API
onLoad((options) => {
  console.log('人选页面加载完成', options)
  
  // 设置导航栏标题
  projectStore.setNavigationTitle()
  
  // 保存传递过来的参数
  pageParams.value = {
    min: options.min || '',
    num: options.num || '',
    classify: options.classify || '',
    projectId: options.projectId || '',
    roleType: (() => {
      const raw = options.roleType || '';
      try {
        return decodeURIComponent(raw);
      } catch (e) {
        return raw;
      }
    })(),
    detailsId: options.detailsId  || '',
  }
  console.log('接收到的页面参数:', pageParams.value)
  console.log(pageParams.value.roleType);
  
   getCeshi()
   getRoleStatus()
})
const changeTab = (tab) => {
  activeTab.value = tab;
}



const isAllSelected = ref(false);

const selectedCount = computed(() => {
  if(!filteredRoleList.value) return 0;
  return filteredRoleList.value.filter(item => item['68761720096a775fc5332e94'] == '已选中').length;
});



function toggleSelect(index) {
  if(!filteredRoleList.value || !allCandidates.value) return;
  const filteredCandidate = filteredRoleList.value[index];
  if (!filteredCandidate) return;
  const originalIndex = allCandidates.value.findIndex(item => item === filteredCandidate);
  if (originalIndex !== -1) {
    allCandidates.value[originalIndex]['68761720096a775fc5332e94'] = 
      allCandidates.value[originalIndex]['68761720096a775fc5332e94'] == '已选中' ? '未选中' : '已选中';
  }
  checkAllSelected();
}

function toggleSelectAll() {
  if(!filteredRoleList.value || !allCandidates.value) return;
  const newState = !isAllSelected.value;
  isAllSelected.value = newState;
  // 仅作用于当前过滤列表中的项
  filteredRoleList.value.forEach(filteredItem => {
    const originalIndex = allCandidates.value.findIndex(item => item === filteredItem);
    if (originalIndex !== -1) {
      allCandidates.value[originalIndex]['68761720096a775fc5332e94'] = newState ? '已选中' : '未选中';
    }
  });
}

function checkAllSelected() {
  if(!filteredRoleList.value) return;
  isAllSelected.value = filteredRoleList.value.length > 0 && filteredRoleList.value.every(candidate => candidate['68761720096a775fc5332e94'] == '已选中');
}

// 监听过滤结果变化，自动同步全选状态
watch(filteredRoleList, () => {
  checkAllSelected();
}, { deep: true });

function toggleExpand(index) {
  expandedIndex.value = expandedIndex.value === index ? -1 : index;
}

// 检查是否有视频
function hasVideo(candidate) {
  return candidate && candidate['688050b38c409b88b851973b'] && candidate['688050b38c409b88b851973b'].trim() !== '';
}

// 获取视频URL
function getVideoUrl(candidate) {
  if (!candidate || !candidate['688050b38c409b88b851973b']) {
    return '/static/logo.png'; // 默认图片
  }
  try {
    const videoData = JSON.parse(candidate['688050b38c409b88b851973b']);
    if (Array.isArray(videoData) && videoData.length > 0) {
      let videoUrl = videoData[0];
      if (typeof videoUrl === 'string') {
        if (videoUrl.includes('\\u003d')) videoUrl = videoUrl.replace(/\\u003d/g, '=');
        if (videoUrl.includes('\\u0026')) videoUrl = videoUrl.replace(/\\u0026/g, '&');
      }
      return videoUrl;
    }
    return '/static/logo.png'; // 默认图片
  } catch (e) {
    console.error('解析视频数据失败', e);
    return '/static/logo.png'; // 默认图片
  }
}

// 获取照片列表
function getPhotos(candidate) {
  if (!candidate || !candidate['687633c7ef700e94a0d82b59']) return [];
  try {
    const photos = JSON.parse(candidate['687633c7ef700e94a0d82b59']);
    return Array.isArray(photos) ? photos : [];
  } catch (e) {
    console.error('解析照片数据失败', e);
    return [];
  }
}

// 获取单个照片的类名
function getPhotoClass(candidate, index) {
  const hasVid = hasVideo(candidate);
  const photoCount = getPhotos(candidate).length;
  
  if (hasVid) {
    if (photoCount <= 2) {
      return `video-photo-${index}`;
    } else {
      // 有视频且照片超过2张时的布局
      if (index < 2) {
        return `video-side-${index}`;
      } else {
        return `video-bottom-${index-2}`;
      }
    }
  } else {
    if (photoCount === 1) return 'single';
    if (photoCount === 2) return `dual-${index}`;
    if (photoCount === 3) return `triple-${index}`;
    return `grid-item`;
  }
}

function photoError(e) {
  console.error('照片加载错误', e);
  uni.showToast({
    title: '照片加载失败',
    icon: 'none'
  });
}

// 获取布局类名
function getLayoutClass(candidate) {
  const hasVid = hasVideo(candidate);
  const photoCount = getPhotos(candidate).length;
  
  if (hasVid) {
    if (photoCount <= 2) {
      return 'has-video-few-photos';
    } else {
      return 'has-video-many-photos';
    }
  } else {
    if (photoCount === 0) return 'no-photos';
    if (photoCount === 1) return 'single-photo';
    if (photoCount === 2) return 'two-photos';
    if (photoCount === 3) return 'three-photos';
    return 'many-photos';
  }
}

function videoError(e) {
  console.error('视频播放错误', e);
  uni.showToast({
    title: '视频加载失败',
    icon: 'none'
  });
}

// 计算属性 - 滑块样式
const heightRangeStyle = computed(() => {
  const minPercent = ((heightRange.value.min - 100) / (300 - 100)) * 100;
  const maxPercent = ((heightRange.value.max - 100) / (300 - 100)) * 100;
  return {
    left: `${minPercent}%`,
    width: `${maxPercent - minPercent}%`
  };
});

const heightMinThumbStyle = computed(() => {
  const percent = ((heightRange.value.min - 100) / (300 - 100)) * 100;
  return {
    left: `${percent}%`
  };
});

const heightMaxThumbStyle = computed(() => {
  const percent = ((heightRange.value.max - 100) / (300 - 100)) * 100;
  return {
    left: `${percent}%`
  };
});

const weightRangeStyle = computed(() => {
  const minPercent = ((weightRange.value.min - 30) / (100 - 30)) * 100;
  const maxPercent = ((weightRange.value.max - 30) / (100 - 30)) * 100;
  return {
    left: `${minPercent}%`,
    width: `${maxPercent - minPercent}%`
  };
});

const weightMinThumbStyle = computed(() => {
  const percent = ((weightRange.value.min - 30) / (100 - 30)) * 100;
  return {
    left: `${percent}%`
  };
});

const weightMaxThumbStyle = computed(() => {
  const percent = ((weightRange.value.max - 30) / (100 - 30)) * 100;
  return {
    left: `${percent}%`
  };
});

// 筛选弹框相关函数
function closeFilterModal() {
  showFilterModal.value = false;
}

function onFilterModalClose() {
  // 弹框关闭后的回调
  console.log('筛选弹框已关闭');
}

function resetFilter() {
  heightRange.value = { min: 160, max: 180 };
  weightRange.value = { min: 45, max: 60 };
  applyConditionFilter.value = false;
  showFilterBar.value = false;
  selectedTags.value = []; // 重置标签筛选
}

function applyFilter() {
  applyConditionFilter.value = true;
  showFilterBar.value = true;
  closeFilterModal();
}

// 身高滑块拖拽
function startDragHeight(type, event) {
  dragging.value.height = type;
  dragging.value.startX = event.touches[0].clientX;
  dragging.value.startValue = heightRange.value[type];
}

function dragHeight(type, event) {
  if (dragging.value.height !== type) return;
  
  const currentX = event.touches[0].clientX;
  const deltaX = currentX - dragging.value.startX;
  const sliderWidth = 280; // 滑块轨道宽度
  const valueRange = 300 - 100; // 数值范围
  const deltaValue = (deltaX / sliderWidth) * valueRange;
  
  let newValue = Math.round(dragging.value.startValue + deltaValue);
  newValue = Math.max(100, Math.min(300, newValue));
  
  if (type === 'min') {
    newValue = Math.min(newValue, heightRange.value.max - 1);
    heightRange.value.min = newValue;
  } else {
    newValue = Math.max(newValue, heightRange.value.min + 1);
    heightRange.value.max = newValue;
  }
}

// 体重滑块拖拽
function startDragWeight(type, event) {
  dragging.value.weight = type;
  dragging.value.startX = event.touches[0].clientX;
  dragging.value.startValue = weightRange.value[type];
}

function dragWeight(type, event) {
  if (dragging.value.weight !== type) return;
  
  const currentX = event.touches[0].clientX;
  const deltaX = currentX - dragging.value.startX;
  const sliderWidth = 280; // 滑块轨道宽度
  const valueRange = 100 - 30; // 数值范围
  const deltaValue = (deltaX / sliderWidth) * valueRange;
  
  let newValue = Math.round(dragging.value.startValue + deltaValue);
  newValue = Math.max(30, Math.min(100, newValue));
  
  if (type === 'min') {
    newValue = Math.min(newValue, weightRange.value.max - 1);
    weightRange.value.min = newValue;
  } else {
    newValue = Math.max(newValue, weightRange.value.min + 1);
    weightRange.value.max = newValue;
  }
}

function endDrag() {
  dragging.value.height = null;
  dragging.value.weight = null;
}

// 标签选择相关函数
function toggleTag(tag) {
  const index = selectedTags.value.indexOf(tag);
  if (index > -1) {
    selectedTags.value.splice(index, 1);
  } else {
    selectedTags.value.push(tag);
  }
}

function clearTagFilter() {
  selectedTags.value = [];
}


// 跳转到报价页面
function goToQuotation() {
  // 检查是否有选中的候选人
  const minRequired = parseInt(pageParams.value.min) || 1 // 确保转换为数字，默认最少1个
  
  // 获取roleMap中已选中状态的角色数量
  const alreadySelectedCount = roleMap.value.has('已选中') ? roleMap.value.get('已选中').length : 0;
  
  // 计算实际需要选择的最少人数
  const actualMinRequired = Math.max(0, minRequired - alreadySelectedCount);
  
  console.log('原始最少需要选择人数:', minRequired);
  console.log('已选中状态的角色数量:', alreadySelectedCount);
  console.log('实际需要选择的最少人数:', actualMinRequired);
  console.log('当前已选择:', selectedCount.value);
  
  if (selectedCount.value < actualMinRequired) {
    uni.showToast({
      title: `最少需要选择${actualMinRequired}位候选人`,
      icon: 'none'
    });
    return;
  }
  
  // 获取选中候选人的详细信息数组
  const selectedCandidates = filteredRoleList.value.filter(candidate => 
    candidate['68761720096a775fc5332e94'] == '已选中'
  )
  const roleArr = selectedCandidates.map(candidate => ({
    rowid: candidate.rowid,
    name: candidate['686e0c6fd9147824a38a6294'] || '姓名',
    avatar: candidate['687633c7ef700e94a0d82b59'] ? JSON.parse(candidate['687633c7ef700e94a0d82b59'])[0] : '/static/logo.png',
    job: candidate.job || '礼仪'
  }))
  
  console.log('选中的候选人数据:', selectedCandidates)
  console.log('选中的角色对象数组:', roleArr)
  
  // 传递页面参数到报价页面
  const params = objectToUrlParams({
    roleArr: JSON.stringify(roleArr), // 将角色对象数组转换为JSON字符串传递
    min: pageParams.value.min || '',
    num: pageParams.value.num || '',
    classify: pageParams.value.classify || '',
    projectId: pageParams.value.projectId || '',
    roleType: pageParams.value.roleType || '',
    detailsId: pageParams.value.detailsId || ''
  })

  console.log('params', params);
  
  
  uni.navigateTo({
    url: `/pages/candidate/quotation?${params}`
  });
}

// 图片预览功能
function previewImage(candidate, photoIndex) {
  const photos = getPhotos(candidate);
  if (photos.length === 0) return;
  
  const urls = photos;
  
  uni.previewImage({
    urls: urls,
    current: photoIndex,
    longPressActions: {
      itemList: ['保存图片'],
      success: function (data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮');
        if (data.tapIndex === 0) {
          // 保存图片到相册
          uni.saveImageToPhotosAlbum({
            filePath: urls[data.index],
            success: function () {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              });
            },
            fail: function () {
              uni.showToast({
                title: '保存失败',
                icon: 'none'
              });
            }
          });
        }
      },
      fail: function (err) {
        console.log(err.errMsg);
      }
    }
  });
}

// 模卡图片预览功能
function previewMokaImage(candidate) {
  if (!candidate || !candidate['688050b38c409b88b851973c']) return;
  
  try {
    const mokaData = JSON.parse(candidate['688050b38c409b88b851973c']);
    if (Array.isArray(mokaData) && mokaData.length > 0) {
      const urls = mokaData;
      
      uni.previewImage({
        urls: urls,
        current: 0,
        longPressActions: {
          itemList: ['保存图片'],
          success: function (data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮');
            if (data.tapIndex === 0) {
              // 保存图片到相册
              uni.saveImageToPhotosAlbum({
                filePath: urls[data.index],
                success: function () {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                  });
                },
                fail: function () {
                  uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                  });
                }
              });
            }
          },
          fail: function (err) {
            console.log(err.errMsg);
          }
        }
      });
    }
  } catch (e) {
    console.error('解析模卡数据失败', e);
    uni.showToast({
      title: '模卡数据解析失败',
      icon: 'none'
    });
  }
}

function getSafeAvatarUrl(candidate) {
  if (!candidate || !candidate['687633c7ef700e94a0d82b59']) return '/static/logo.png';
  try {
    const avatarData = candidate['687633c7ef700e94a0d82b59'];
    if (typeof avatarData !== 'string' || avatarData.trim() === '') return '/static/logo.png';
    const parsed = JSON.parse(avatarData);
    return Array.isArray(parsed) && parsed.length > 0 ? parsed[0] : '/static/logo.png';
  } catch (e) {
    console.error('解析头像数据失败', e);
    return '/static/logo.png';
  }
}

function getSafeTags(candidate) {
  if (!candidate || !candidate['68b5676f153a1d736d85931d']) return [];
  try {
    const tagData = candidate['68b5676f153a1d736d85931d'];
    if (typeof tagData !== 'string' || tagData.trim() === '') return [];
    const parsed = JSON.parse(tagData);
    return Array.isArray(parsed) ? parsed : [];
  } catch (e) {
    console.error('解析标签数据失败', e);
    return [];
  }
}
</script>

<style lang="scss" scoped>


.tab-container {
  margin: 16px 0 8px 0;
  
  .tab-bar {
    display: flex;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 12px;
    
    .tab-item {
      flex: 1;
      padding: 8px 16px;
      text-align: center;
      font-size: 13px;
      color: #666;
      border-radius: 6px;
      transition: all 0.2s ease;
      cursor: pointer;
      
      &.active {
        background: #fff;
        color: #ff6a9c;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      &:not(.active):hover {
        color: #333;
      }
    }
  }
}

.candidate-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 10px;
  padding-bottom: 80px; /* 为固定底部留出空间 */
  box-sizing: border-box;
  
  /* 加载动画样式 */
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .loading-container {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 48rpx 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  }

  .loading-spinner {
    width: 64rpx;
    height: 64rpx;
    border: 6rpx solid #F0F0F0;
    border-top: 6rpx solid #FF6B9B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
  

  
  .filter-bar {
    position: fixed;
    bottom: 80px; /* 在footer上方 */
    left: 0;
    right: 0;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    
    .filter-bar-text {
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    
    .count {
      font-size: 12px;
      color: #333;
    }
    
    .select-all-btn {
      background-color: #ffffff;
      color: #ea4096;
      font-size: 12px;
      padding: 3px 12px;
      border-radius: 6px;
      border: 1px solid #f7bfdc;
    }
  }
  
  .candidate-list {
    flex: 1;
    
    .candidate-card {
      position: relative;
      background-color: #fff8fc;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(255, 106, 156, 0.1);
      border: 1px solid #f9cde3;
      transition: all 0.3s ease;
      
      &.expanded {
        margin-bottom: 20px;
      }
      
      .card-content {
        display: flex;
        
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          margin-right: 12px;
        }
        
        .info {
          flex: 1;
          
          .name-gender {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            
            .name {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              margin-right: 4px;
            }
            
            .gender {
              font-size: 15px;
              padding: 0 4px;
              
              &.female {
                color: #ff6a9c;
              }
            }
          }
          
          .location {
            display: flex;
            font-size: 12px;
            color: #666;
            
            .job {
              margin-right: 4px;
            }
            
            .separator {
              margin: 0 4px;
              color: #ccc;
            }
          }
        }
      }
      
      .expanded-content {
        margin-top: 12px;
        
      
      .tab-container {
        margin: 16px 0 8px 0;
        
        .tab-bar {
          display: flex;
          background: #f8f8f8;
          border-radius: 8px;
          padding: 2px;
          margin-bottom: 12px;
          
          .tab-item {
            flex: 1;
            padding: 8px 16px;
            text-align: center;
            font-size: 13px;
            color: #666;
            border-radius: 6px;
            transition: all 0.2s ease;
            cursor: pointer;
            
            &.active {
              background: #fff;
              color: #ff6a9c;
              font-weight: 500;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            &:not(.active):hover {
              color: #333;
            }
          }
        }
      }
      
      .tab-content {
        min-height: 200px;
      }
      
      .tab-pane {
        animation: fadeIn 0.3s ease;
      }
      
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      .moka-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: #999;
        font-size: 14px;
      }
        
        .section {
          margin-top: 12px;
          
          .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            
            .section-title-bar {
              width: 2px;
              height: 14px;
              background-color: #ff6a9c;
              margin-right: 6px;
              border-radius: 1px;
            }
            
            text {
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
          }
          
          .physical-info {
            display: flex;
            justify-content: space-between;
            
            .info-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              
              .info-value {
                font-size: 14px;
                color: #333;
                margin-bottom: 4px;
              }
              
              .info-label {
                font-size: 10px;
                color: #999;
                background-color: #f5f5f5;
                padding: 2px 6px;
                border-radius: 8px;
              }
            }
          }
          
          .tags {
            display: flex;
            flex-wrap: wrap;
            
            .tag {
              background-color: #fff;
              border: 1px solid #ddd;
              border-radius: 3px;
              padding: 4px 10px;
              margin-right: 8px;
              margin-bottom: 8px;
              font-size: 12px;
              color: #333;
            }
            .no-tags {
              font-size: 12px;
              color: #999;
              margin-top: 8px;
            }
          }
          
          .photos {
            display: flex;
            flex-direction: column;
            width: 100%;
            
            // 有视频的布局
            &.has-video {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              
              .video-container {
                width: 62%;
                height: 300px;
                border-radius: 8px;
                overflow: hidden;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 35%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .photo-item {
                  width: 100%;
                  height: 145px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  cursor: pointer;
                  transition: all 0.2s ease;
                  
                  &:hover {
                    transform: scale(1.02);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                  }
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            // 单张照片的布局
            &.single-photo {
              .photo-container {
                width: 100%;
                
                .photo-item {
                  width: 100%;
                  height: 300px;
                  border-radius: 8px;
                }
              }
            }
            
            // 两张照片的布局
            &.two-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                
                .photo-item {
                  width: 49%;
                  height: 300px;
                  border-radius: 8px;
                }
              }
            }
            
            // 三张照片的布局
            &.three-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                .photo-item {
                  border-radius: 8px;
                  
                  &.triple-0 {
                    width: 100%;
                    height: 200px;
                    margin-bottom: 10px;
                  }
                  
                  &.triple-1, &.triple-2 {
                    width: 49%;
                    height: 150px;
                  }
                }
              }
            }
            
            // 多张照片的布局
            &.many-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                .photo-item {
                  width: 32%;
                  height: 120px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                }
              }
            }
            
            // 无照片的布局
            &.no-photos {
              .photo-container {
                width: 100%;
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
                border-radius: 8px;
                
                .no-photo {
                  color: #999;
                  font-size: 14px;
                }
              }
            }

            // 有视频且照片较少的布局（2张或以下）
            &.has-video-few-photos {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              
              .video-container {
                width: 62%;
                height: 300px;
                border-radius: 8px;
                overflow: hidden;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 35%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .photo-item {
                  width: 100%;
                  height: 145px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  cursor: pointer;
                  transition: all 0.2s ease;
                  
                  &:hover {
                    transform: scale(1.02);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                  }
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            // 有视频且照片较多的布局（3张或以上）
            &.has-video-many-photos {
              display: flex;
              flex-direction: column;
              
              .video-container {
                width: 100%;
                height: 240px;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 10px;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                // 视频下方的照片网格
                .photo-item {
                  width: 32%;
                  height: 100px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                }
              }
            }
          }
          
          .collapse-btn {
            opacity: 0;
            text-align: center;
            margin-top: 12px;
            color: #ff6a9c;
            font-size: 12px;
          }
        }
      }
      
      .expand-btn {
        background-color: #ffffff;
        position: absolute;
        bottom: 6px;
        right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border: 1px solid #d5d2d4;
        border-radius: 12px;
        color: #6675a3;
        font-size: 12px;
        
        .icon-down {
          width: 12px;
          height: 12px;
          margin-right: 3px;
        }
        
        /* 收起状态样式 */
        &.collapsed {
          border-color: #eb4197;
          color: #eb4197;
          box-shadow: 0 2px 8px rgba(235, 65, 151, 0.2);
          position: fixed;
          bottom: 120px;
          right: 20px;
          z-index: 999;
        }
      }
      
      .checkbox {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid #ddd;
        
        &.checked {
          background-color: #ff6a9c;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .icon-check {
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    padding: 15px 10px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    
    .filter-btn {
      flex: 1;
      height: 45px;
      border: 1px solid #ddd;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      margin-right: 10px;
      font-size: 16px;
      color: #333;
    }
    
    .recommend-btn {
      flex: 1;
      height: 45px;
      background-color: #ff6a9c;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
    }
  }

  .filter-content {
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px 15px 20px;
      border-bottom: 1px solid #eee;
      flex-shrink: 0;

      .tag-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        
        .tag-filter-title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }
        
        .tag-dropdown-container {
          display: flex;
          align-items: center;
          
          .tag-dropdown-btn {
            background-color: transparent;
            border: 1px solid #eb4197;
            border-radius: 8px;
            padding: 8px 12px;
            
            .tag-dropdown-text {
              color: #eb4197;
              font-size: 14px;
            }
          }
          
          .tag-dropdown-arrow {
            width: 16px;
            height: 16px;
            margin-left: 8px;
            transition: transform 0.2s ease;
            
            &.open {
              transform: rotate(90deg);
            }
          }
        }
      }
    }

    .filter-body {
      padding: 20px;
      flex-grow: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      // 条件筛选标题区
      .condition-title-section {
        margin-bottom: 20px;
        
        .filter-title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }
      }

      // 分隔线
      .filter-divider {
        height: 1px;
        background-color: #f0f0f0;
        margin: 20px 0;
      }
      
      // 范围筛选区
      .range-filter-section {
        margin-bottom: 25px;
        
        .range-filter-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          
          .range-filter-title {
            font-size: 13px;
            color: #333;
            font-weight: 500;
          }
          
          .range-filter-value {
            font-size: 18px;
          font-weight: bold;
          color: #333;
          }
        }
        
        .range-slider-container {
          .range-track {
            position: relative;
            height: 4px;
            background-color: #e0e0e0;
            border-radius: 2px;
            margin: 20px 0;
            
            .range-fill {
              position: absolute;
              top: 0;
              height: 100%;
              background-color: #e0e0e0; // 改为灰色，与轨道颜色一致
              border-radius: 2px;
            }
            
            .range-thumb {
              position: absolute;
              top: 50%;
              width: 15px;
              height: 15px;
              background-color: #eb4197;
              border-radius: 50%;
              transform: translate(-50%, -50%);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
              cursor: pointer;
              
              // 添加外层边框容器
              &::before {
                content: '';
                position: absolute;
                top:    -5px;
                left:   -5px;
                right:  -5px;
                bottom: -5px;
                border: 1px solid #eb4197;
                border-radius: 50%;
                pointer-events: none;
              }
              
              &:active {
                transform: translate(-50%, -50%) scale(1.2);
              }
            }
          }
          
          .range-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            
            .range-label {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
    
    .filter-footer {
      display: flex;
      padding: 15px 20px;
      border-top: 1px solid #eee;
      gap: 15px;
      flex-shrink: 0;
      
      .filter-reset-btn {
        flex: 1;
        height: 44px;
        border: 1px solid #ddd;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        font-size: 16px;
        color: #333;
        
        &:active {
          background-color: #f5f5f5;
        }
      }
      
      .filter-apply-btn {
        flex: 1;
        height: 44px;
        background-color: #eb4197;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
        
        &:active {
          background-color: #eb4197;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.tag-selection-area {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background-color: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;

    .tag-item {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 4px 10px;
      font-size: 12px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;

      &.selected {
        background-color: #ff6a9c;
        border-color: #ff6a9c;
        color: #fff;
      }

      &:hover {
        border-color: #ff6a9c;
        color: #ff6a9c;
      }
    }
  }

  .tag-actions {
    display: flex;
    justify-content: flex-end;

    .clear-tags-btn {
      background-color: #ff6a9c;
      color: #fff;
      font-size: 12px;
      padding: 3px 12px;
      border-radius: 6px;
      border: 1px solid #f7bfdc;
    }
  }
}
</style>